<template>
	<!--<div class="activitiesbanner" v-if="(bannerdata.length>0 && env === 'production')|| env === 'edit'" :class="{bannerbg2:bannerdata.length==0}">
		<div v-for="(val,index) in bannerdata">
			<img class="bannerbg" :style="`height: ${screenHeight}rem`" :src="val.publicityPicture" @click='jumpEvent(val)' />
		</div>
	</div>-->
	<div class="activitiesbanner" v-if="bannerdata.length>0">
		<!--一行一列-->
		<div v-if="posadpicStyle==='one'">
			<div v-for="(val,index) in bannerdata" :key="index">
				<img style="width: 100%;" :src="val.publicityPicture" @click='jumpEvent(val)' />
			</div>
		</div>
		<!--一行两列-->
		<div class="coutwoPic" v-if="posadpicStyle==='two'">
			<div class="coutwoPicimg" v-for="(val,index) in bannerdata" :key="index">
				<img :src="val.publicityPicture" @click="jumpEvent(val)"/>
			</div>
		</div>
		<!--一行三列-->
		<div class="couthreePic" v-if="posadpicStyle==='three'">
			<div class="couThreePicimg" v-for="(val,index) in bannerdata" :key="index">
				<img :src="val.publicityPicture" @click='jumpEvent(val)' />
			</div>
		</div>
		<div style="clear: both;"></div>
	</div>
</template>

<script>
	export default {
		props: {
			bannerdata: {
				type: Array,
				default: () => []
			},
			bannerid: {
				type: String,
				default: ""
			},
		},
		data() {
			return {

			}
		},
		components: {

		},
		methods: {
			jumpEvent(item) {
				if(item.extendField) {
					var urldata = JSON.parse(item.extendField).url.path
					if(urldata) {
						this.$router.push({
							name: "MiddleWare",
							params: {
								pageName: urldata
							}
						})
					}

				}
			},
			/*showCover() {
				this.$refs.editContent.style.transform = "translateY(0px)"
			},
			hideCover() {
				this.$refs.editContent.style.transform = "translateY(-400px)"
			}*/
		},
		computed: {
			posadpicStyle() {
				if(this.bannerid) {
					if(parseInt(this.getCurrentVDO(this.bannerid, this.pageName).config.posadpicStyle) == 0) {
						return 'one';
					} else if(parseInt(this.getCurrentVDO(this.bannerid, this.pageName).config.posadpicStyle) == 1) {
						return 'two';
					} else if(parseInt(this.getCurrentVDO(this.bannerid, this.pageName).config.posadpicStyle) == 2) {
						return 'three';
					}else{
						return 'one';
					}
				}
			},
		},
		mounted() {
			
		},
	}
</script>

<style>
	.activitiesbanner .coutwoPic {
		/*padding: 0.5rem;*/
		position: relative;
		float: left;
		width: 100%;
	}
	
	.activitiesbanner .coutwoPic .coutwoPicimg {
		position: relative;
		float: left;
		width: 50%;
		/*margin: 0.3rem 0rem;*/
	}
	
	.activitiesbanner .coutwoPic .coutwoPicimg img {
		width: 100%;
		/*padding: 0 0.25rem;*/
	}
	
	.activitiesbanner .couthreePic {
		/*padding: 0.5rem 0.2rem;*/
		text-align: center;
		margin: 0rem auto;
		float: left;
	}
	
	.activitiesbanner .couthreePic .couThreePicimg {
		float: left;
		/*margin: 0.3rem 1%;*/
		width: 33.33%;
	}
	
	.activitiesbanner .couthreePic .couThreePicimg img {
		max-width: 100%;
		margin: 0 auto;
	}
</style>